<template>
  <div class="wallet">
    <div class="my-header">
      <i class="back" @click="$router.go(-1)"></i>
      <strong>账号安全</strong>
      <i class="myMsg"></i>
    </div>
    <div class="safe-container" v-if="accountInfo">
      <div class="safe-item">
        <div class="item-left">
          <p>手机绑定</p>
          <p class="tips"> 若手机更换请尽快修改</p>
        </div>
        <div class="item-right">
          <p v-if="accountInfo.userAccountBind===1"><span class="text-green">已设置</span> | <span class="text-primary" @click="$router.push('/updatePhone')">更换</span></p>
          <p v-else> <span>未设置</span> | <span class="text-primary">设置</span></p>
        </div>
      </div>
      <div class="safe-item">
        <div class="item-left">
          <p>登录密码</p>
          <p class="tips"> 建议您定期更改密码以保护账号安全性</p>
        </div>
        <div class="item-right">
          <p v-if="accountInfo.userPwdBind===1"><span class="text-green">已设置</span> | <span class="text-primary" @click="$router.push('/resetPwd')">修改</span></p>
          <p v-else> <span>未设置</span> | <span class="text-primary">设置</span></p>
        </div>
      </div>
      <div class="safe-item">
        <div class="item-left">
          <p>余额密码</p>
          <p class="tips"> 订单余额支付时使用</p>
        </div>
        <div class="item-right">
          <p v-if="accountInfo.payPwdBind===1"><span class="text-green">已设置</span> | <span class="text-primary" @click="$router.push({name:'walletPwd',query:{
            type:'edit'
          }})">修改</span></p>
          <p v-else> <span>未设置</span> | <span class="text-primary">设置</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        safeList: [],
        loading: false,
        params: {
          pageIndex: 1,
          pageSize: 20
        },
        hasNext: true
      }
    },
    watch: {},
    computed: {
      ...mapGetters([
        'userInfo',
        'accountInfo'
      ])
    },
    methods: {
      fetchData() {
        // 判断是否登录
        const params = {
          userId: this.userInfo.id
        }
        // 获取用户详细信息
        if (!this.accountInfo) {
          this.$store.dispatch('GetAccountInfo', params).then(res => {
            console.log(res)
          })
        }
      }
    },
    mounted() {
      this.fetchData()
    }
  }

</script>
<!-- safe -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .my-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 1.25rem;
    background: #fff;
    padding: $padding;
    @include flexbox(space-between, center, row, nowrap);
    border-bottom: 1px solid #eee;
    .back {
      display: block;
      width: .65rem;
      height: .65rem;
      background: url('~assets/common/images/arrow-left.png') no-repeat;
      background-size: 100%;
    }
    strong {
      font-size: 18px;
      font-weight: normal;
      color: #333;
    }
    .bheedit {
      font-size: 12px;
    }
  }

  .safe-container {
    padding-top: 1.25rem;
    .safe-item {
      font-size: 14px;
      padding: $padding;
      background: #fff;
      @include flexbox(space-between,
      center,
      row,
      nowrap);
      border-bottom: 1px solid #EAEEF1;
      line-height: 24px;
      .tips {
        font-size: 12px;
        color: $gray;
      }

      .item-right {
        color: $gray;
        span {
          font-size: 13px;
        }
        .text-primary {
          color: $primary;
        }
        .text-red {
          color: $red;
        }
        .text-green {
          color: #39BD48;
        }
      }
    }
  }

</style>
